import { Input } from "antd"
import { FC, useState } from "react"

import { SFormItem } from "@/components/common"
// import { Select } from "antd"
import ComplexInput from "@/components/common/complexInput"
import { useLocale } from "@/locales"
// import dynamicComponent from "./dynamicImport"

export type LimitComplexField = {
	templateName: string
	templateId: number
}
const Demo: FC<{ options?: { label: string; value: string }[] }> = props => {
	const { newFormat } = useLocale()
	const options = [
		{ label: newFormat({ id: "label.redLimit.modelName" }), value: "templateName" },
		{ label: newFormat({ id: "label.redLimit.modelId" }), value: "templateId" }
	]
	const [field, setField] = useState(props.options ? props.options[0].value : "templateName")
	// console.log(newFormat({ id: "label.demoList.0" }))
	// const DynamicComponent = lazy(() => dynamicComponent(props.name))
	return (
		<ComplexInput options={props.options ?? options} value={field} onTypeChange={setField}>
			<SFormItem name={field}>
				<Input placeholder={newFormat({ id: "label.please_input" })} autoComplete="off" />
			</SFormItem>
		</ComplexInput>
	)
}

export default Demo
